<template>
	<view class="login">
		<view class="header">
			<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="widthFix"></image>
			<view class="h3">
				JEECG BOOT
			</view>
			<view class="ipt">
				<u--form labelPosition="left" :model="model" ref="form">
					<u-form-item label="账号" leftIcon="account" prop="username" borderBottom ref="item1">
						<u--input v-model="model.username" border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" leftIcon="lock" rightIcon="eye-off" prop="password" borderBottom ref="item2">
						<u--input v-model="model.password" type="password" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="btn">
				<u-button text="登录" type="primary" @click="login"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {getLogin} from '../../api/api.js'
	export default {
		data() {
			return {
				model:{
					username:"jeecg",
					password:"123456"
				}
			};
		},
		methods:{
			login(){
				getLogin(this.model).then(res=>{
					if(res.code==200){
						uni.setStorageSync('token',res.result.token)
						uni.reLaunch({
							url:"../index/index"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login {
		text-align: center;
		padding: 40rpx 0 0;
		box-sizing: border-box;

		.header {
			image {
				width: 200rpx;
				margin: 60rpx 0;
			}

			.h3 {
				font-size: 64rpx;
			}
		}
		.ipt{
			margin-top: 80rpx;
			.u-form-item{
				width: 80%;
				margin: 30rpx auto;
			}
		}
		.btn{
			margin-top: 40rpx;
		}
	}
</style>
